<template>
  <div>
    <!-- list-type 上传组件的列表样式 text/ picture/ picture-card
         action是一个必须填写的参数, 表示上传的图片地址,
         action给地址 选择完图片后会自动以post的方式提交到对应的服务器上
         action后期是可以进行覆盖的

         file-list 展示的图片列表 数组包对象
         :on-preview 点击文件列表中的图片 会触发的方法 方法中有一个参数 file 就是被点击的图像的信息(对象)
         limit 限制上传的图像的数量(如果限制上传2张图片, 就隐藏+按钮)
         :on-remove="fn" 文件列表移除文件时的钩子
         :http-request="fn" 覆盖默认的上传行为，可以自定义上传的实现
         :before-upload="fn" 文件上传之前触发的处理函数
         :on-change="fn" 文件状态发生变化时触发的函数 添加文件、上传成功和上传失败时都会被调用
      -->
    <el-upload
      list-type="picture-card"
      action="#"
      :file-list="fileList"
      :on-preview="handlePreview"
      :limit="limit"
      :class="{myupload: isShow}"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :before-upload="beforeUpload"
      :on-change="handleChange"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 图像预览的对话框组件 -->
    <el-dialog
      :visible="showStaffPhoto"
      width="30%"
      title="图像预览"
      @close="showStaffPhoto = false"
    >
      <img :src="url" width="100%">
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
// 创建了腾讯云实例
var cos = new COS({
  SecretId: 'AKIDDFBtMaYGjvsc7NN8dsztZ4NTLzPaXFht',
  SecretKey: 'zkIk01oOksmTv9AvUosgKisqY4LPEG5l'
})
export default {
  name: 'Upload',
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      // 文件列表
      fileList: [
        // { url: 'https://img1.baidu.com/it/u=3608510549,1695891924&fm=26&fmt=auto&gp=0.jpg' }
        // { url: 'https://img0.baidu.com/it/u=2335292160,1862920530&fm=224&fmt=auto&gp=0.jpg' }
      ],
      showStaffPhoto: false, // 控制图像预览的对话框组件展示的布尔值
      url: '' // 对话框图像的url地址
      // limit: 2 // 限制上传的数量
    }
  },
  computed: {
    isShow() {
      return this.fileList.length >= this.limit
    },
    isAllSuccessed() {
      // 所有的图片的status状态 success 才能进行保存
      return this.fileList.every(item => item.status === 'success')
    }
  },
  methods: {
    handlePreview(file) { // 被点击的图像信息
    // 1. 展示对话框
      this.showStaffPhoto = true
      // console.log(file.url) // 自行准备对话框组件 准备数据 在对话框中显示图片
      // 2. 将点击的图像的url赋值给img标签的src属性绑定的值
      this.url = file.url
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      // file移除的文件的对象 fileList是剩余的文件列表
      // console.log(file, fileList)
      // 将剩下的文件列表fileList 同步给data中的fileList
      this.fileList = [...fileList]
    },
    // 上传之前的处理函数, 在这个处理函数中进行文件大小和文件类型预校验
    // return false会终止上传
    beforeUpload(file) { // file是上传的文件对象
      const { type, size } = file
      // console.log(type)
      // console.log(size)
      // 1.文件大小的判断
      if (size / 1024 / 1024 > 3) { // 限制上传文件大小在3M之内
        this.$message.warning('请上传3M以内的图片')
        return false // 会终止上传
      }
      // 2. 文件类型的校验
      if (!['image/gif', 'image/png', 'image/jpg', 'image/jpeg', 'image/bmp'].includes(type)) {
        this.$message.warning('请上传gif/png/jpg/bmp等类型的图片格式')
        return false // 会终止上传
      }
      return true
    },
    // 文件状态发生变化时触发的函数 添加文件、上传成功和上传失败时都会被调用
    handleChange(file, fileList) {
      // file就是新增的文件对象 fileList就是最新的文件列表的数据
      // console.log(file, fileList)
      // 将最新的文件列表fileList 同步给data中的fileList
      this.fileList = [...fileList]
    },
    // 自定义上传的处理函数
    handleUpload({ file }) { // 上传配置对象 这个对象中有一个.file属性就是上传的文件对象
      console.log(file)

      // 收集到上传的文件对象, 传递到腾讯云服务器上
      cos.putObject({
        Bucket: 'hrsaas86-1305579172', /* 必须 存储桶名称 */
        Region: 'ap-shanghai', /* 存储桶所在地域，必须字段 */
        Key: +new Date() + file.name, /* (字符串类型) 必须 上传到腾讯云存储的图片的名称 key保证唯一性*/
        StorageClass: 'STANDARD', // 标准的存储方案
        Body: file, // 上传文件对象
        // 上传期间触发的函数, 受网络影响多次触发
        onProgress: (progressData) => { // 将函数改成箭头函数, 后期会处理到data中的数据
        // progressData 是一个对象 loaded已上传 total总文件大小 speed上传的速度 percent 上传的进度0-1
          // console.log(JSON.stringify(progressData))
          // console.log(this)
          const obj = this.fileList.find(item => item.uid === file.uid)
          // 处理上传进度条状态
          obj.status = 'uploading'
          // 处理上传的进度条百分比值
          obj.percentage = parseInt(progressData.percent * 100)
        }
        // 上传完成后的处理函数 有可能会成功 有可能会失败
      }, (err, data) => { // 将函数改成箭头函数, 后期会处理到data中的数据
      // 上传成功后会打印data ,上传失败会得到err对象
        // console.log(err || data)
        if (err) return this.$message.error('上传失败,请稍后重试')
        // 上传完成 得到data data中有一个 Location 字段 就是腾讯云存储的图像地址
        // console.log(data.Location)
        const obj = this.fileList.find(item => item.uid === file.uid)
        // 将腾讯云返回的地址替换给对应data中fileList对应的文件对象
        obj.url = 'https://' + data.Location
        this.$message.success('上传完成')
        // 将上传成功后的对象的状态改成 success
        obj.status = 'success'
      })
      // -------之前实现的方案 伪代码-----
      /* const fm = new FormData()
      fm.append('xxx', obj.file)
      axios.post({
        url: 'xxx',
        method: 'put',
        data:fm
      }) */
    }
  }
}
</script>

<style lang="scss" scoped>
.myupload {
  ::v-deep.el-upload--picture-card {
    display: none;
  }
}
</style>
